<template>
  <div>
    <div class="top" ref="box">
      <div class="search">
        <img @click="$router.push('/search')" src="@/assets/搜索.png" alt="" />
      </div>
      <div class="readtime" v-if="itList.includes(active)">
        <div class="readtop" @click="show = true" style="text-align: center">
          {{ year }}年-0{{ month }}月
        </div>
        <van-overlay :show="show" @click="show = false">
          <div class="wrapper" @click.stop>
            <div class="block">
              <van-datetime-picker
                v-model="currentDate"
                type="year-month"
                title="选择年月"
                :min-date="minDate"
                :max-date="maxDate"
                :formatter="formatter"
                @cancel="cancel()"
                @confirm="confirm()"
                @change="changeDate()"
              />
            </div>
          </div>
        </van-overlay>
      </div>
      <van-tabs v-model="active" animated type="none" background="white">
        <van-tab
          v-for="(item, index) in list"
          :title="'' + item.title"
          :key="index"
          title-active-color="#000"
          title-class="changecolor"
        >
          <!-- 阅读 -->
          <read
            ref="changeData"
            v-show="index === 0"
            :newYear="year"
            :newMonth="month"
          ></read>
          <!-- 日签 -->
        <keep-alive>
          <dailySignature 
            ref="changedaily"
            v-show="index === 1"
            :newYear="year"
            :newMonth="month"
          ></dailySignature>
        </keep-alive>
          <!-- 专题 -->
          <specialSubject v-show="index === 2"></specialSubject>
          <!--问答 -->
          <answers
            ref="changeAnswer"
            v-show="index === 3"
            :newYear="year"
            :newMonth="month"
          ></answers>
          <long v-show="index === 4"> </long>
          <Notes v-show="index === 5"></Notes>
          <hot v-show="index === 6"></hot>
          <bookShadow v-show="index === 7"></bookShadow>
          <hotAuthor v-show="index === 8"></hotAuthor>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import read from "@/components/read.vue";
import dailySignature from "@/components/dailySignature.vue";
import specialSubject from "@/components/specialSubject.vue";
import answers from "@/components/answers.vue";
import Notes from "@/components/Notes.vue";
import hot from "@/components/hot.vue";
import bookShadow from "@/components/bookShadow.vue";
import hotAuthor from "@/components/hotAuthor.vue";
import long from "@/components/long.vue";
export default {
  name: "find",
  components: {
    read,
    dailySignature,
    specialSubject,
    answers,
    Notes,
    hot,
    bookShadow,
    hotAuthor,
    long,
  },
  mounted() {},
  created() {},
  methods: {
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      }
      return val;
    },
    confirm() {
      if (this.active === 0) {
        console.log("点击确认日期");
        console.log(this.currentDate.getFullYear());
        console.log(this.currentDate.getMonth() + 1);
        this.year = this.currentDate.getFullYear();
        this.month = this.currentDate.getMonth() + 1;
        this.$nextTick(() => {
          this.$refs.changeData[0].getReadData();
          console.log("子组件1", this.$refs.changeData);
        });
      } else if (this.active === 1) {
        console.log("点击确认日期");
        console.log(this.currentDate.getFullYear());
        console.log(this.currentDate.getMonth() + 1);
        this.year = this.currentDate.getFullYear();
        this.month = this.currentDate.getMonth() + 1;
        this.$nextTick(() => {
          this.$refs.changedaily[1].getDailyData();
          console.log("子组件2", this.$refs.changedaily);
        });
      } else if (this.active === 3) {
        console.log("点击确认日期");
        console.log(this.currentDate.getFullYear());
        console.log(this.currentDate.getMonth() + 1);
        this.year = this.currentDate.getFullYear();
        this.month = this.currentDate.getMonth() + 1;
        this.$nextTick(() => {
          this.$refs.changeAnswer[1].getAnswerData();
          console.log("子组件4", this.$refs.changeAnswer);
        });
      }

      this.show = false;
    },
    cancel() {
      console.log("点击了取消选择日期");
      this.show = false;
    },
    changeDate() {
      console.log("选项改变了");
    },
    getHeight() {},
  },
  data() {
    return {
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1, //月份从0开始，需要加1
      minDate: new Date(2016, 0, 1),
      maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
      currentDate: new Date(),
      show: false,
      isUpdate: true, // 是否到底-最后一页
      active: 0,
      itList: [0, 1, 3],
      list: [
        { title: "阅读", id: 1 },
        { title: "日签", id: 2 },
        { title: "专题", id: 3 },
        { title: "问答", id: 4 },
        { title: "长篇", id: 5 },
        { title: "小记", id: 6 },
        { title: "热榜", id: 7 },
        { title: "书影", id: 8 },
        { title: "作者", id: 9 },
        { title: "", id: 10 },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.block {
  width: 100%;
  height: 200px;
  background-color: #fff;
  margin-top: 50px;
}
.top {
  padding-top: 30px;
  position: relative;
  .search {
    width: 35px;
    position: fixed;
    right: 0px;
    top: 0;
    background: #fff;
    z-index: 100;
    img {
      width: 25px;
    }
  }
}
.readtime {
  .readtop {
    width: 100%;
    height: 20px;
    background: #fcfcfc;
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
  }
}
::v-deep .top {
  margin-top: 10px;
  height: 100%;
  overflow: scroll;

  .van-tabs__wrap {
    position: fixed;
    top: 0;
    z-index: 99;
  }
  .van-tab--active {
    height: 30px;
    font-size: 20px;
  }
}
</style>